<template>
	<el-col class="cascader" :span="options.span || 22">
		<el-form-item :required="options.required" :label="options.label" :prop="options.prop">
			<el-cascader v-bind="$attrs" :props="options.props || { expandTrigger: 'hover' }" @change="change" style="width:100%" :options="list"
				v-model="inputVal"></el-cascader>
		</el-form-item>
	</el-col>
</template>

<script>
	export default {
		name: 'cascader',
		props: {
			value: [Object, Array, String],
			options: Object,
			list: Array,
		},
		data() {
			return {};
		},
		inject: ['vm'],
		computed: {
			inputVal: {
				get: function() {
					return this.value;
				},
				set: function(e) {
					this.$emit("input", e);
				},
			},
		},
		methods: {
			change(e) {
				if (this.options.change) {
					this.vm[this.options.change](e);
				}
			}
		}
	};
</script>

<style scoped>
.cascader{
	height: 46px;
}
</style>